<template>
  <div class="title blue_title">问题描述</div>
  <div class="question_box">
    <div class="question_title">请简短描述您的问题</div>

    <input class="question_input" @input="changeData"  v-model="images" />
    <div class="img_box">
      <div class="show_img" v-if="dataImg.length > 0" >
        <div class="del_box" v-for="(item, index) in dataImg" :key="index">
          <img :src="item" alt="" class="ok_img" />
          <img
            class="del_img"
            @click="delImg(index)"
            src="../assets/del.png"
            alt=""
          />
        </div>
      </div>

      <div class="addImg">
        <input
          class="input_img"
          type="file"
          @change="uploadImg"
          accept="image/*"
          ref="clearFile"
          capture="camera"
        />
        <div class="img_border">
          <img src="../assets/camera.png" alt="" class="img_icon" />
        </div>
      </div>
    </div>
    <div class="tro">支持上传2张jpg/png</div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
  dataImg: Array,
  modelValue: String,
});
const emit = defineEmits(["uploadImg", "delImg", "update:modelValue"]);

const images = ref("");

onMounted(() => {
  images.value = props.modelValue;
});

const uploadImg = () => {
  //上传图片
  emit("uploadImg");
};
const delImg = (i) => {
  //删除图片
  emit("delImg", i);
};
const changeData = (e) => {
  //问题描述
  emit("update:modelValue", e.target.value);
};
</script>